<template>
	<view class="home-list-item u-f u-f-js" hover-class="home-list-item-hover" @tap.stop="clickevent">
		<view class="u-f u-f-ac"><view class="icon iconfont " 
		:style="{color:item.color?item.color:''}" 
		:class="['icon-'+ (item.icon ? item.icon : '')]"></view>{{item.name}}</view>
		<view class="icon iconfont icon-jinru"></view> 
	</view>
</template>

<script>
	export default {
		props:{
			item:Object,
			index:Number
		},
		methods:{
			clickevent(){
				switch(this.item.clicktype){
					case 'navigateTo':
						if(this.item.url){uni.navigateTo({url:this.item.url})}
						break;
					case 'switchTap':
						if(this.item.url){uni.switchTab({url:this.item.url})}
						break;
					case 'clear':
						uni.showModal({
							title:"提示",
							content:"是否确认清除缓存?",
							confirmText:"立即清除",
							success: res=>{
								if(res.confirm){
									uni.clearStorage();
									uni.showToast({
										title:"缓存已清除"
									})
								} 
							}
						})
						break;
				}
			}
		}
	}
</script>

<style scoped>
	.home-list-item {
		padding: 20upx ;
		border-bottom: 1upx solid #F9F9F9;
	}
	.home-list-item > view:first-child>view{
		margin-right: 10upx;
	} 
	.home-list-item > view:last-child{
		color:#C7C7C7;
	}
	.home-list-item-hover {
		background: rgba(233,233,233,.2); 
	}
</style>
